<template>
    <div>
<h1>会员显示</h1>
<a href="/">首页</a>
会员昵称 <input type="text" v-model="can.name">
年龄区间 <input type="text" v-model="can.xiao">-<input type="text" v-model="can.da">
会员等级 <select v-model="can.djid">
                <option v-for="a in ba" :value="a.dId">{{ a.djName }}</option>
               </select>

               <input type="button" value="查询" @click="cha">
<table class="table">
    <thead>
        <tr>
            <td>会员名称</td>
            <td>会员头像</td>
            <td>会员等级</td>
            <td>会员状态</td>
            <td>会员年龄</td>
            <td>操作</td>
        </tr>
    </thead>

    <tbody>
        <tr v-for="a in data">
            <td>{{a.hyName}}</td>
            <td><img :src="'https://localhost:7127/'+a.tuPian" style="width: 100px;height: 100px;"></td>
            <td>{{a.djName}}</td>
            <td>{{a.hyState?"启用":"禁用"}}</td>
            <td>{{a.age}}</td>
            <td>
                <input type="button" :value="a.hyState==true?'禁用':'启用'" @click="gai(a.hyId)">
                <input type="button" value="修改" @click="xiu(a.hyId)">
            </td>
        </tr>
    </tbody>
</table>

共{{page.zongtiao}}条，共{{page.zongye}}页，当前{{can.pageindex}}页，每页{{can.pagesize}}条
<input type="button" value="首页" @click="fen(1)">
<input type="button" value="上一页" @click="fen(can.pageindex-1)">
<input type="button" v-for="a in page.zongye" :value="a" @click="ma(a)">
<input type="button" value="下一页" @click="fen(can.pageindex+1)">
<input type="button" value="尾页" @click="fen(page.zongye)">
<select v-model="can.pagesize" @change="yr">
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<input type="number" v-model="can.pageindex" placeholder="输入你要跳转的那页">
<input type="button" value="跳转" @click="tiao">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { usebbbStore } from '@/stores/sb';
import { useRouter } from 'vue-router';
const router=useRouter()
const bbb=usebbbStore()

onMounted(()=>{
    Shq()
    bang()
    show()
})

//修改
const xiu=(hh:any)=>{
      router.push({path:'/fanhy',query:{id:hh}})
}

//改状态
const gai=(ax:any)=>{
    axios.get("https://localhost:7127/api/Hy/GaiZT",{params:{id:ax}}).then(res=>{
        if(res.data>0){
            alert("状态修改成功")
            show()
        }
        else{
            alert("状态修改失败")
        }
    })
}

//查询
const cha=()=>{
    can.value.pageindex=1;
    show();
}

//跳转页
const tiao=()=>{
    show()
}

//改页容量
const yr=()=>{
    can.value.pageindex=1;
    show()
}

//小野马
const ma=(an:any)=>{
  can.value.pageindex=an
  show()
}

//分页
const fen=(va:any)=>{
  if(va>=1&&va<=page.value.zongye){
    can.value.pageindex=va;
    show()
  }
}

//授权
const Shq=()=>{
    if(bbb.data.name==""){
        alert("未登录，不能进行会员操作")
       router.push({path:"/login"})
    }
}

//绑定的m
const ba=ref([{
    "dId": 0,
    "djName": "",
    "djState": null
  }])
//绑定
  const bang=()=>{
    axios.get("https://localhost:7127/api/Dj/GetAll").then(res=>{
     ba.value=res.data
    })
  }
//显示的m
  const data=ref([{
      "djid": 0,
      "tuPian": "",
      "hyName": "",
      "hyState": true,
      "age": 0,
      "hyId": 0,
      "dId": 0,
      "djName": ""
    }])
//参数m
const can=ref({
    name:"",
    da:0,
    xiao:0,
    djid:0,
    pageindex:1,
    pagesize:2
})

//
const page=ref({
    zongtiao:0,
    zongye:0
})
    const show=()=>{
        axios.get("https://localhost:7127/api/Hy/ShowHy",{params:can.value}).then(res=>{
            data.value=res.data.plist
            page.value.zongtiao=res.data.count
            page.value.zongye=Math.ceil( page.value.zongtiao/can.value.pagesize)
        })
    }

</script>

<style scoped>

</style>